<template >
  <!-- v-outClick='cancle' -->
  <div class="register">
    <el-dialog title="用户注册"
               :visible.sync='isShow'
               width="650px"
               @close='cancle'>
      <el-form label-width="100px"
               :model="form"
               :rules='rules'
               ref="form">
        <el-form-item label="头像"
                      prop="avatar">
          <Picture v-model="form.avatar"
                   ref="picture"></Picture>
        </el-form-item>
        <el-form-item label="昵称"
                      prop='username'>
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机"
                      prop="phone"
                      ref="code">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="图形码"
                      prop="code"
                      ref="code">
          <el-input class="one"
                    v-model="form.code"></el-input><img :src="picUrl"
               alt=""
               class="code"
               @click="getCode"
               ref='pic'>
        </el-form-item>
        <el-form-item label="验证码"
                      prop='rcode'>
          <el-input class="one"
                    v-model="form.rcode1"></el-input><button ref='getRCode'
                  class="getCode"
                  @click.stop.prevent="getRCode">获取用户验证码</button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="btn">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary"
                     @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { isRightPhone } from '@/utils/validate.js'
import { register, sendsms } from '@/api/login.js'
export default {
  data () {
    return {
      isShow: false,
      picUrl: process.env.VUE_APP_BASE_API + '/captcha?type=sendsms' + Math.random() * 99,
      form: {
        username: '', // 是string用户名
        phone: '', // 是string手机号
        email: '', // 是string邮箱
        avatar: '', // 是string头像地址
        password: '', // 是string密码
        code: '',//图形验证码
        rcode1: ''
      },
      time: 5,
      busUrl: process.env.VUE_APP_BASE_API + '/captcha?type=sendsms',
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '必填', trigger: 'blur' },
          {
            validator: (rules, value, callback) => {
              isRightPhone(value, callback)
            }
          },
          {

          }
        ],
        email: [
          { required: true, message: '必填', trigger: 'blur' },
          {
            validator: (rules, value, callback) => {
              const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确邮箱'))
              }
            }
          },

        ],
        avatar: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 6, max: 10, message: '请输入6-11为密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 4, max: 4, message: '请输入4位验证码', trigger: 'blur' }
        ],
        rcode1: [
          { required: true, message: '必填', trigger: 'blur' }
        ]

      }

    }
  },

  methods: {
    async getRCode () {
      this.$refs.form.validateField(["code", "phone"])

      // let timeID = setInterval(() => {
      //   if (this.time < 0) {
      let res = sendsms({
        code: this.form.code,
        phone: this.form.phone
      })
      this.$message.success('获取到短信验证码:' + res.data.captcha)

      //     document.querySelector('.getCode').disabled = false
      //     document.querySelector('.getCode').style.cursor = 'default'
      //     document.querySelector('.getCode').innerHTML = `获取用户验证码`

      //     clearInterval(timeID)
      //   } else {
      //     this.time = this.time--
      //     document.querySelector('.getCode').disabled = true
      //     document.querySelector('.getCode').style.cursor = 'not-allowed'
      //     document.querySelector('.getCode').innerHTML = `获取用户验证码(${this.time})s`


      //   }
      // }, 3000)



    }
    ,
    getCode () {
      this.$nextTick(() => {
        this.$refs.pic.src = this.picUrl
      });

    },
    // 点击取消关闭弹窗
    cancle () {
      this.$refs.picture.imageUrl = ''
      this.isShow = false
      // 重置form框
      this.$refs.form.resetFields()
      this.form = {
        username: '', // 是string用户名
        phone: '', // 是string手机号
        email: '', // 是string邮箱
        avatar: '', // 是string头像地址
        password: '', // 是string密码
        rcode: '',
        rcode1: ''
      }
    },
    // 点击确定按钮,把数据信息提交到后台
    submit () {
      this.$refs.form.validate(async (result) => {
        if (result) {
          await register(this.form)
          this.$message.success('注册成功')
          this.cancle()
        } else {
          this.$message.error('请填写完整信息')
        }
      })
    }
  },

  mounted () {
    // 监听事件
    // this.getCode()
    this.$bus.$on('isShow', (show, picUrl) => {
      this.busUrl = picUrl
      this.picUrl = picUrl
      this.isShow = show
    })
  },
  destroyed () {
    // 销毁事件
    this.$bus.$off('isShow')
  }

}
</script>

<style lang='less' scoped>
.btn {
  text-align: center;
}
::v-deep .el-dialog__header {
  background-color: #07b4fa !important;
  text-align: center;
}
::v-deep span.el-dialog__title {
  color: #fff;
}
::v-deep button.el-dialog__headerbtn {
  display: none;
}
::v-deep .el-input.one {
  width: 340px;
}
img,
.getCode {
  width: 143px;
  height: 43px;
  vertical-align: middle;
}
.getCode {
  border: 1px solid black;
  text-align: center;
  padding: 10px 20px;
}
::v-deep .avatar-uploader {
  margin-left: 138px;
}
</style>
